 <!-- 创建一个场景  抗锯齿  感光材质与材质-->
<template>
    <div ref="Cavans"></div>
</template>
<script setup>
import * as THREE from 'three'
const Cavans = ref(null)
// 创建一个场景
const scene = new THREE.Scene()
// 创建一个相机   PerspectiveCamera 透视投影相机 四个参数 视野角度（FOV）长宽比（aspect ratio）近截面（near） 远截面（far）
const camera = new THREE.PerspectiveCamera( 75, document.body.clientWidth / document.body.clientHeight, 0.1, 1000 )
// 渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 抗锯齿
})
// 优化 设置像素比
renderer.setPixelRatio(window.devicePixelRatio || 1)
// 渲染器的尺寸
renderer.setSize( 1200, 600 )
// geometry 几何体 创建一个立方体 BoxGeometry
const geometry = new THREE.BoxGeometry( 1, 1, 1 )
// 添加全局光照 AmbientLight ambientlight( color : Integer, intensity : Float ) 环境光会均匀的照亮场景中的所有物体。
// color - (参数可选）颜色的rgb数值。缺省值为 0xffffff。 十六进制
// intensity - (参数可选)光照的强度。缺省值为 1。
const light = new THREE.AmbientLight(0xffffff, 0.5)
// 添加方向光 平行光（directionallight） 平行光是沿着特定方向发射的光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
scene.add(light, directionalLight)
// 颜色
const color = new THREE.Color(Math.random(), Math.random(), Math.random())
// material 材质  MeshLambertMaterial Lambert材质 对光照敏感 在没有光照的情况下 默认黑色
const material = new THREE.MeshLambertMaterial({ 
    color,
    // opacity: 0.5 
}); 
// Mesh 网格  网格包含一个几何体 geometry 以及作用在此几何体上的材质 material
const cube = new THREE.Mesh( geometry, material );
// 调用 scene.add()，物体将会被添加到 (0,0,0) 坐标
// 创建辅助坐标系
const axesHelper = new THREE.AxesHelper()
scene.add(cube, axesHelper);
// 相机位置
camera.position.z = 5;
const animate = () => {
    // 浏览器API
	requestAnimationFrame( animate );
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;    
	renderer.render( scene, camera );
}
animate();

onMounted(()=>{
    // 挂载
    Cavans.value.appendChild(renderer.domElement);
})
</script>